import { View, Text, ScrollView } from '@tarojs/components'
import './index.less'

interface InfoModalProps {
  title: string;
  show: boolean;
  onClose: () => void;
  onConfirm: () => void;
  children: React.ReactNode;
}

const InfoModal = (props: InfoModalProps) => {
  const { show, title, onClose, onConfirm, children } = props

  if (!show) {
    return null
  }

  // 阻止滚动穿透
  const handleCatchTouchMove = (e) => {
    e.stopPropagation()
  }

  return (
    <View className='modal-overlay' onTouchMove={handleCatchTouchMove}>
      <View className='modal-container'>
        {/* 1. 标题 */}
        <View className='modal-header'>
          <Text className='modal-title'>{title}</Text>
        </View>

        {/* 2. 可滚动内容区域 */}
        <View className='modal-content-wrapper'>
          <ScrollView
            scrollY
            style={{ height: '100%' }}
          >
            <View className='modal-text-content'>
              {children}
            </View>
          </ScrollView>
        </View>

        {/* 3. 底部按钮 (恢复按钮) */}
        <View className='modal-footer'>
          <View className='confirm-btn' onClick={onConfirm}>
            我知道了
          </View>
        </View>

        {/* 4. 关闭按钮 */}
        <View className='close-btn' onClick={onClose}>
          ×
        </View>
      </View>
    </View>
  )
}

export default InfoModal
